<template>
  <el-dialog
    title="重置密码"
    :visible.sync="dialogVisible"
    :before-close="cancel"
    :close-on-click-modal="false"
    class="vc-dialog-form"
    width="480px">
    <el-form ref="resetPwd" :model="resetPwd" :rules="rules" label-width="100px" size="small">
      <el-form-item label="重置账号" prop="cipherCode">
        <el-input v-model="entity.username" disabled></el-input>
      </el-form-item>

      <el-form-item label="新密码" prop="cipherCode">
        <div class="vc-form-text">{{ resetPwd.cipherCode }}</div>
      </el-form-item>

      <br>

      <el-form-item label="当前账号" prop="username">
        <el-input v-model="resetPwd.username" disabled></el-input>
      </el-form-item>

      <el-form-item label="登录密码" prop="checkPwd" v-if="checkPwdShow">
        <el-input v-model="resetPwd.checkPwd" maxlength="20" placeholder="请输入" class="show-password" show-password clearable @clear="$refs.resetPwd.validateField('checkPwd')"></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="cancel">取消</el-button>
      <el-button type="primary" size="small" :disabled="disabled" @click="sure">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'resetPwd',
  props: ['dialogVisible', 'entity'],
  data() {
    return {
      resetPwd: {
        cipherCode: '',
        username: this.$store.state.user.userInfo.username,
        checkPwd: ''
      },
      rules: {
        checkPwd: [
          { required: true, message: '请输入登录密码', trigger: 'blur' }
        ]
      },
      disabled: false,
      checkPwdShow: true
    }
  },
  watch: {
    dialogVisible(val) {
      if (!val) return;
      this.disabled = false;
      this.$nextTick(() => {
        this.$refs.resetPwd && this.$refs.resetPwd.resetFields();
        this.resetPwd.cipherCode = this.GLOBAL.pwdHandler.getRandomPwd();
        this.checkPwdShow = false;
        setTimeout(() => { this.checkPwdShow = true }, 0);
      });
    }
  },
  methods: {
    /**
     * 确定
     */
    sure() {
      if (this.disabled) {
        return;
      }
      this.$refs.resetPwd.validate((valid) => {
        if (!valid) {
          return false;
        }
        let msg = this.GLOBAL.pwdHandler.checkPwdByName(this.resetPwd.cipherCode, this.entity.username);
        if (msg) {
          this.$confirmBox(() => {
            this.resetPwd.cipherCode = this.GLOBAL.pwdHandler.getRandomPwd();
          }, `新密码${msg}，确定重新生成新密码吗？`);
          return;
        }
        this.disabled = true;
        this.$api.resetPasswd({
          data: {
            id: this.entity.id,
            cipherCode: this.ENCRYPT.RSAencrypt(this.resetPwd.cipherCode),
            checkPwd: this.ENCRYPT.RSAencrypt(this.resetPwd.checkPwd)
          }
        }).then(res => {
          if (!res.success) {
            this.disabled = false;
            return;
          }
          this.$emit('close', res.data || {});
          this.$notifyBox('密码重置成功', 'success');
        }).catch(() => {
          this.disabled = false;
        });
      });
    },
    /**
     * 取消
     */
    cancel() {
      this.$emit('close', false);
    }
  }
}
</script>